<script setup>
import { onMounted ,ref} from 'vue';
import { ElButton, ElDatePicker, ElInput, ElOption, ElSelect } from 'element-plus';
import Card from './Card.vue';

const props = defineProps({
    tasks: Object,
    members: Array,
    canSelectAssign: Boolean,
    onDelete:Function
})

const statusMap = {
    0: '进行中',
    1: '已完成',
    2: '未开始'
}
console.log(props.tasks);
</script>

<template>
<Card v-if="tasks!=null" class="container">
    <ElInput type="textarea" style="max-width: 200px;"  size="small" v-model="tasks.name"></ElInput>
    <ElSelect size="small" style="max-width: 120px;" v-if="props.canSelectAssign" :multiple="true" v-model="tasks.assignee">
        <ElOption v-for="member in props.members"  :key="member.uid" :value="member.uid" :label="member.name"></ElOption>
    </ElSelect>
    <ElSelect size="small" style="max-width: 75px;" v-model="props.tasks.status">
        <ElOption v-for="key,value in statusMap" :key="value" :value="value" :label="key">
        </ElOption>
    </ElSelect>
    <ElDatePicker  style="max-width: 200px;" type="daterange" v-model="props.tasks.rangeDate"></ElDatePicker>
    <ElButton size="small" type="danger" @click="onDelete">删除</ElButton>
</Card>
</template>

<style scoped>
.container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
</style>